<template>
	<view class="container">
		<scroll-view scroll-y="true" class="h-100">
			<uni-nav-bar-vue title="我的会员" :dark="true" themeBgColor="#1F2130" leftIcon="left" themeColor="#fff"
				@clickLeft="clickLeft"></uni-nav-bar-vue>
			<view class="top">
				<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/vip-bg.png" class="img"></image>
				<view class="t-box w-100 h-100">
					<view class="info">
						<view class="who-box">
							<view class="who v-center">
								<!-- <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/avatar.png" class="avatar"></image>
                <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/avatar.png" class="avatar"></image>
                <image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/avatar.png" class="avatar"></image> -->
								<swiper class="swiper-container" autoplay interval="2000" circular previous-margin="30rpx"
									next-margin="30rpx">
									<swiper-item v-for="(item, index) in imgList" class="v-center" :key="index">
										<image :src="item.url+'?v=1'" class="avatar"></image>
									</swiper-item>
								</swiper>
								<view class="text">购买了会员</view>
							</view>
						</view>
						<view class="avatar-box">
							<view class="tx">
								<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/gj.png" v-if="vipTime" class="gj">
								</image>
								<image :src="userInfo.avatar" class="tx-img"></image>
							</view>
							<view class="right">
								<view class="v-center name">
									<view class="text">{{ userInfo.name }}</view>
									<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/vip.png" v-if="vipTime"
										class="vip-img"></image>
								</view>
								<view class="ts" v-if="vipTime">有效期至：{{ vipTime }}</view>
								<view class="ts" v-else>您还不是VIP</view>
							</view>
						</view>
					</view>
					<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/zk1.png" class="zk"></image>
				</view>
			</view>
			<view class="db-box">
				<view class="tj space-between" v-if="!memberId">
					<view class="text">推广码：</view>
					<input type="number" class="input" v-model="code" placeholder="点击输入推广数字码" placeholder-class="c-palceholder" />
				</view>
				<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/nf.png" class="nf"></image>
				<image src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/kt.png" class="kt"></image>
				<view class="xz-box">
					<view class="v-center">
						<view class="dot"></view>
						<view class="xz-text">成为富侨汇会员后每日可使用一次会员权益，享受旗下指定门店服务大项8.8折或线上价9.5折；</view>
					</view>
					<view class="v-center">
						<view class="dot"></view>
						<view class="xz-text">富侨汇会员服务开通后不支持退款；</view>
					</view>
					<view class="v-center">
						<view class="dot"></view>
						<view class="xz-text">如支付后未到账，请联系富侨汇客服；</view>
					</view>
					<view class="v-center">
						<view class="dot"></view>
						<view class="xz-text">获取更多详细的说明，请点击《富侨汇用户协议》 《支付协议》。</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom">
			<view class="yd-text v-center">
				<view class="yd">我已阅读、理解并接受以下规定</view>
				<view class="xy" @click="goRichText(1)">《富侨汇用户协议》</view>
				<view class="xy" @click="goRichText(3)">《支付协议》</view>
			</view>
			<view class="center btn" @click="pay">
				<view>立即支付</view>
				<view class="money"><text class="qian">￥</text>99</view>
				<view class="unit">/年</view>
				<view class="del">365元/年</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isExpired,
		getTime
	} from "../../utils/plug"
	import uniNavBarVue from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	import {
		getUserInfo,
		createPay,
		getConfig
	} from "../../api/active"
	export default {
		components: {
			uniNavBarVue
		},
		data() {
			return {
				imgList: [],
				memberId: uni.getStorageSync("memberId") || "",
				token: uni.getStorageSync("token") || "",
				vipTime: "",
				userInfo: "",
				isFinial: false,
				code: "",
				price: "",
				titleStyle: {
					color: "red",
					fontWeight: "400",
					fontSize: "32rpx"
				}
			}
		},
		onLoad() {
			if (this.token && uni.getStorageSync("userId")) {
				getUserInfo({
					userId: uni.getStorageSync("userId")
				}).then(res => {
					this.userInfo = res.data
					this.vipTime = res.data.vipTime
					if (this.vipTime) {
						this.isFinial = isExpired(this.vipTime)
						this.vipTime = getTime(this.vipTime)
					}
				})
			}
			getConfig({
				key: "VIP_PRICE"
			}).then(res => {
				this.price = res.data
			})
			this.initImg()
		},
		methods: {
			goRichText(t) {
				uni.navigateTo({
					url: "../richtext/richtext?title=" + t
				})
			},
			initImg() {
				for (let i = 0; i < 50; i++) {
					this.imgList.push({
						url: `https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/${("00" + this.rand(1, 10)).slice(-3)}.png`
					})
				}
			},
			rand(min, max) {
				return parseInt(Math.random() * (max - min + 1) + min)
			},
			getInfo() {
				getUserInfo({
					userId: uni.getStorageSync("userId")
				}).then(res => {
					this.userInfo = res.data
				})
			},
			pay() {
				if (!this.token || !uni.getStorageSync("userId"))
					return uni.showModal({
						title: "暂未登录",
						content: "是否现在去登录",
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/getInfo/getInfo"
								})
							} else if (res.cancel) {
								console.log("用户点击取消")
							}
						}
					})
				const that = this
				createPay({
					price: this.price,
					userId: uni.getStorageSync("userId"),
					openId: uni.getStorageSync("openid"),
					code: this.memberId || this.code
				}).then(res => {
					const payData = res.data
					// const orderInfo = {
					// 	appid: payData.appid,
					// 	timeStamp: payData.timeStamp,
					// 	nonceStr: payData.nonceStr,
					// 	package: payData.package,
					// 	signType: payData.signType,
					// 	paySign: payData.sign,
					// 	partnerid: payData.partnerid,
					// 	prepayid: payData.package.substring(10)
					// }
					console.log(payData)
					uni.requestPayment({
						provider: "wxpay",
						...payData,
						package: payData.packageValue,
						success: function(res) {
							// console.log(res)
							// var rawdata = JSON.parse(res.rawdata)
							uni.showToast({
								title: "支付成功",
								icon: "none",
								duration: 1500
							})
							setTimeout(() => {
								uni.reLaunch({
									url: "../index/index"
								})
							}, 1500)
							if (that.memberId) {
								uni.removeStorageSync("memberId")
							}
						},
						fail: function(err) {
							uni.showToast({
								title: "支付失败",
								icon: "none"
							})
						}
					})
				})
			},
			clickLeft() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.swiper-container {
		width: 90rpx;
		height: 100%;
	}

	.container {
		width: 100vw;
		min-height: 100vh;
		background: #1f2130;
		position: relative;
		padding-bottom: 160rpx;
	}

	.top {
		width: 100vw;
		height: 609rpx;
		position: absolute;
		top: 0;
	}

	.img {
		width: 100vw;
		height: 609rpx;
		position: absolute;
	}

	.t-box {
		position: absolute;
		top: 0;
		left: 0;
		padding: 185rpx 0 0 48rpx;

		.info {
			width: 654rpx;
			height: 170rpx;
			padding-top: 10rpx;
		}

		.who-box {
			display: flex;
			justify-content: flex-end;
			padding-right: 20rpx;
		}

		.who {
			// width: 213rpx;
			height: 36rpx;
			background: #494750;
			border-radius: 18rpx;
			padding: 0 10rpx;
			gap: 6rpx;

			.avatar {
				width: 24rpx;
				height: 24rpx;
			}

			.text {
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
				background: linear-gradient(180deg, #e8c9b9 0%, #ca9f85 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.avatar-box {
			display: flex;
			padding-left: 40rpx;

			.tx {
				position: relative;

				.tx-img {
					width: 78rpx;
					height: 77rpx;
					border-radius: 50%;
				}

				.gj {
					width: 52rpx;
					height: 43rpx;
					position: absolute;
					top: -20rpx;
					left: -12rpx;
				}
			}

			.right {
				margin-left: 30rpx;

				.text {
					font-weight: 800;
					font-size: 36rpx;
					color: #e5c3a9;
					background: linear-gradient(180deg, #e8c9b9 0%, #ca9f85 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.vip-img {
					width: 110rpx;
					height: 44rpx;
					margin-left: 10rpx;
				}

				.ts {
					font-weight: 500;
					font-size: 24rpx;
					color: #6f3f25;
					background: linear-gradient(180deg, #e8c9b9 0%, #ca9f85 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
	}

	.zk {
		width: 576rpx;
		height: 40rpx;
		display: block;
		margin: 90rpx auto 0 35rpx;
	}

	.tj {
		width: 654rpx;
		height: 80rpx;
		border-radius: 10rpx;
		border: 2px solid #d2c1ac;
		align-items: center;
		margin: 0 auto;
	}

	.db-box {
		position: absolute;
		width: 100%;
		top: 540rpx;
		left: 0;

		.tj {
			padding: 0 30rpx;
		}

		.text {
			font-weight: 400;
			font-size: 28rpx;
			color: #996f31;
			background: linear-gradient(0deg, #f4e1ba 0%, #caa265 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.input {
			color: #fff;
			font-size: 28rpx;
			font-weight: 400;
			text-align: right;
		}
	}

	.nf {
		width: 654rpx;
		height: 196rpx;
		display: block;
		margin: 57rpx auto 0 auto;
	}

	.kt {
		width: 327rpx;
		height: 37rpx;
		display: block;
		margin: 80rpx auto 0 auto;
	}

	.xz-box {
		margin-top: 36rpx;
		padding-left: 52rpx;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		padding-right: 30rpx;

		.v-center {
			align-items: flex-start;
		}

		.dot {
			width: 10rpx;
			height: 10rpx;
			background: #d3d1d4;
			transform: rotate(45deg);
			margin-top: 12rpx;
		}

		.xz-text {
			font-weight: 300;
			font-size: 28rpx;
			color: #efebeb;
			margin-left: 10rpx;
			display: flex;
			flex: 1;
			line-height: 40rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		width: 100vw;
		text-align: center;
		background: #1f2130;
		padding-top: 20rpx;

		.yd-text {
			justify-content: center;
		}

		.yd {
			font-weight: 300;
			font-size: 22rpx;
			color: #efebeb;
		}

		.xy {
			font-weight: 300;
			font-size: 22rpx;
			color: #daa75a;
		}

		.btn {
			width: 690rpx;
			height: 90rpx;
			background: linear-gradient(90deg, #eec37f, #d7a455);
			box-shadow: 0rpx 0rpx 34rpx 4rpx rgba(151, 106, 35, 0.44);
			border-radius: 45rpx;
			margin: 14rpx auto 20rpx auto;
			font-weight: 500;
			font-size: 30rpx;
			color: #2c2f40;
			gap: 6rpx;

			.qian {
				font-weight: 500;
				font-size: 26rpx;
				color: #2c2f40;
			}

			.money {
				font-weight: bold;
				font-size: 45rpx;
				color: #2c2f40;
			}

			.unit {
				font-weight: 500;
				font-size: 26rpx;
				color: #2c2f40;
			}

			.del {
				font-size: 26rpx;
				color: #2c2f40;
				text-decoration-line: line-through;
				opacity: 0.9;
			}
		}
	}

	.h-100 {
		height: 100vh;
	}
</style>